<template>
  <div>
    <div class="box">
      <div class="dv">
        <div class="dv1" v-for="(v, index) in arr" :key="index" @click="skip(index)">
          <img :src="v.src" alt="" />
          <p>{{ v.txts }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import axios from "axios"
let service = axios.create()
export default {
  data() {
    return {
      arr:[]
    };
  },
  methods: {
    //跳转列表商城
    skip(index) {
      if (index == 0 || index == 10) {
        this.$router.push("/JingDongSupermarket");

      } else if (index == 1) {
        // 条件满足跳转数码电器页面
        this.$router.push("/cybers");
      } else if (index == 4 || index == 14) {
        // 条件满足跳转京东到家京东国际
        this.$router.push("/newstore");
        // 条件满足跳转京东生鲜页面
      } else if (index == 3 || index == 13) {
        this.$router.push("/JDFreshPage");
        //
      } else if (index == 2 || index == 12) {
        this.$router.push("/newgoods");
      } else if (index == 11) {
        this.$router.push('/store')
      }
    },
  },
  mounted(){
    service({
            url:"http://localhost:3000/lhlist",
            method:"get"
        }).then((res)=>{
            this.arr = res.data
        })
  },
};
</script>
  
<style scoped>
* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  display: none;
}

.box {
  width: 100%;
  height: 162px;
  background-color: #eee;
  overflow: auto;
}

.dv {
  width: 200%;
  height: 162px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.dv .dv1 {
  width: 10%;
  height: 74px;
  text-align: center;
}

.dv img {
  width: 40px;
  height: 40px;
}

.dv .dv1 p {
  color: #666;
  font-size: 12px;
  height: 18px;
}

.box2 {
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
  margin-left: 4px;
}

.bottom {
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>